<template>
	<view>
		<view class="bg"></view>
		<view class="container">
			<view class="info panel">
				<view class="info-line">
					<text>负责人:</text>
					<view class="input">
						<input type="text" v-model="shopVerification.director" placeholder="输入负责人姓名" placeholder-style="color: #c7c9ce; font-size: 16rpx" />
					</view>
				</view>
				<view class="info-line">
					<text>身份证号码:</text>
					<view class="input">
						<input type="text" v-model="shopVerification.idCard" placeholder="输入负责人身份证号码"
							placeholder-style="color: #c7c9ce; font-size: 16rpx" />
					</view>
				</view>
				<view class="info-line">
					<text>手机号:</text>
					<view class="input">
						<input type="text" v-model="shopVerification.mobile" placeholder="输入手机号" placeholder-style="color: #c7c9ce; font-size: 16rpx" />
					</view>
				</view>
				<view class="info-line">
					<text>验证码:</text>
					<view class="input verification">
						<input type="text" placeholder="输入验证码" placeholder-style="color: #c7c9ce; font-size: 16rpx" />
						<text @click="getCode()">{{getCodeText}}</text>
					</view>
				</view>
				<view class="info-line">
					<text>店名:</text>
					<view class="input">
						<input v-model="shop.name" type="text" placeholder="输入店名"
							placeholder-style="color: #c7c9ce; font-size: 16rpx" />
					</view>
				</view>
				<view class="info-line">
					<text>工商营业执照号码:</text>
					<view class="input">
						<input type="text" v-model="shopVerification.businessLicenseId" placeholder="输入工商营业执照号码"
							placeholder-style="color: #c7c9ce; font-size: 16rpx" />
					</view>
				</view>
				<view class="info-line">
					<text>经营区域:</text>
					<view class="input">
						<input v-model="shop.operatingArea" type="text" placeholder="输入经营区域"
							placeholder-style="color: #c7c9ce; font-size: 16rpx" />
					</view>
				</view>
				<view class="info-line">
					<text>地址:</text>
					<view class="input">
						<input v-model="shop.address" type="text" placeholder="输入地址"
							placeholder-style="color: #c7c9ce; font-size: 16rpx" />
					</view>
				</view>
				<view class="info-line">
					<text>所属区域:</text>
					<view>
						<uni-data-picker :localdata="cityData" popup-title="请选择班级" @change="onchange" v-model="cla"></uni-data-picker>
					</view>
				</view>
			</view>
			<view class="introduction panel">
				<view class="title">商家简介</view>
				<textarea v-model="shop.description" name="" id="" cols="20" rows="10"
					placeholder="请准确介绍一下公司的情况"></textarea>
			</view>
			<view class="identification panel">
				<view class="title">身份证正反面照片</view>
				<text>请选择正面照片（带有国徽一面）</text>
				<uni-file-picker file-mediatype="image" mode="grid" file-extname="png,jpg" :limit="1"
				 @select="selectShopVerificationFront" />
				<text>请选择反面照片（带有个人信息一面）</text>
				<uni-file-picker file-mediatype="image" mode="grid" file-extname="png,jpg" :limit="1"
				 @select="selectShopVerificationOpposite"/>
			</view>
			<view class="license panel">
				<view class="title">营业执照</view>
				<uni-file-picker file-mediatype="image" mode="grid" file-extname="png,jpg" :limit="1"
				 @select="selectShopVerificationbusinessLicenseImg"/>
			</view>
			<view class="photo panel">
				<view class="title">门店照片</view>
				<uni-file-picker file-mediatype="image" mode="grid" file-extname="png,jpg" :limit="1"
				 @select="selectShopPhoto"/>
			</view>
			<button class="btn" @click="register">注册</button>
		</view>
	</view>
</template>

<script>
	import cityData from '@/static/citydata.js'
	export default {
		data() {
			return {
				getCodeText: '获取验证码',
				getCodeIsWaiting: false,
				cla: '',
				shop: {
					name: '店名', // 后名
					operatingArea: '', // 经营区域
					regTime: '', // 注册时间
					address: '', // 详细地址
					longitude: '', // 经度
					latitude: '', // 纬度
					description: '', // 商家介绍
					photo: '', // 门店照片【缩略图】
					rate: 0.0, // 商家评分，默认值0
					status: 0, // 经营状态（0正常、1放假）
					auditStatusId: 0, // 审核状态(0待审核、1系统已审核)
					area: '' // 所属区域
				},
				shopVerification: {
					id: null, // 主键ID
					mid: null, // 店铺ID
					director: "", // 负责人
					idCard: "", // 身份证号码
					mobile: "", // 手机号
					businessLicenseId: "", // 工商营业执照号码
					businessLicenseImg: "", // 营业执照图片
					front: "", // 身份证正面图片
					opposite: "", // 身份证反面图片
				},
				cityData: cityData

			}
		},
		methods: {
			Timer() {},
			getCode() {
				if (this.getCodeIsWaiting) {
					return
				}
				this.setTimer()
			},
			setTimer() {
				this.getCodeIsWaiting = true
				let holdTime = 60;
				this.getCodeText = '重新获取(60)';
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.getCodeText = '获取验证码';
						this.getCodeIsWaiting = false;
						clearInterval(this.Timer);
						return;
					}
					this.getCodeText = '重新获取(' + holdTime-- + ')';
				}, 1000)
			},
			// 选择后直接上传
			selectShopVerificationFront(e) {
				uni.uploadFile({
					url: `${this.$fileBaseUrl}/upload`,
					filePath: e.tempFiles[0].path,
					success: (res) => {
						let url = JSON.parse(res.data).data.url
						this.shopVerification.front = url
					}
				})
			},
			selectShopVerificationOpposite(e) {
				uni.uploadFile({
					url: `${this.$fileBaseUrl}/upload`,
					filePath: e.tempFiles[0].path,
					success: (res) => {
						let url = JSON.parse(res.data).data.url
						this.shopVerification.opposite = url
					}
				})
			},
			selectShopVerificationbusinessLicenseImg(e) {
				uni.uploadFile({
					url: `${this.$fileBaseUrl}/upload`,
					filePath: e.tempFiles[0].path,
					success: (res) => {
						let url = JSON.parse(res.data).data.url
						this.shopVerification.businessLicenseImg = url
					}
				})
			},
			selectShopPhoto(e) {
				uni.uploadFile({
					url: `${this.$fileBaseUrl}/upload`,
					filePath: e.tempFiles[0].path,
					success: (res) => {
						let url = JSON.parse(res.data).data.url
						this.shop.photo = url
					}
				})
			},
			register() {
				// 确定注册之前 获取系统时间赋值给注册时间
				let now = new Date()
				this.shop.regTime = now
				uni.request({
					url: `${this.$shopBaseUrl}/register`,
					method: "POST",
					data: {
						shop: this.shop,
						shopVerification: this.shopVerification
					},
					success: (res) => {
						console.log(now)
						console.log(res)
					}
				})
			},
			onchange(e) {
				let list = e.detail.value
				if (list.length == 0) return
				let data = list[0].text + list[1].text
				this.shop.area = data
			}
		}
	}
</script>

<style>
	.bg {
		height: 400rpx;
		background-color: #3486FD;
	}

	.container {
		position: absolute;
		top: 30rpx;
	}

	.panel {
		width: 650rpx;
		margin: 0 30rpx 0 30rpx;
		border-radius: 30rpx;
		padding: 50rpx 20rpx 30rpx 20rpx;
		background-color: #FFFFFF;
		margin-bottom: 30rpx;
	}

	.info-line {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.info-line>text {
		width: 250rpx;
		font-weight: bold;
	}

	.info-line .input {
		border: 1rpx solid #e9e9eb;
		padding: 15rpx;
		border-radius: 50rpx;
		width: 380rpx;
	}

	.info-line .input>input {
		font-size: 26rpx;
	}

	.verification>input {
		width: 150rpx;
		border-right: 1rpx solid #8f939c;
	}

	.verification {
		display: flex;
		align-items: center;
		font-size: 26rpx;
	}

	.verification>text {
		color: #90B6F6;
		margin-left: 30rpx;
	}

	.introduction>textarea {
		margin-top: 20rpx;
		padding: 20rpx;
		border: 1rpx solid #8f939c;
		border-radius: 30rpx;
		font-size: 28rpx;
	}

	.panel .title {
		font-weight: bold;
		font-size: 30rpx;
	}

	.btn {
		background-color: #0863E7;
		width: 600rpx;
		color: #FFFFFF;
		border-radius: 50rpx;
		margin-bottom: 30rpx;
	}

	.title {
		margin-bottom: 30rpx;
	}
	
	.imgFile {
		display: flex;
	}
</style>